<template>
    <div class="w-full h-full px-0 overflow-hidden" style="background-color: var(--boxborder);">
        <div class="background h-screen flex justify-center items-center">
            <div class="h-[30rem] w-[50rem] rounded-lg shadow-md flex" style="background:rgba(0,0,0, 0.1);">
                <div class="w-1/2">
                </div>
                <div class="w-1/2">
                    <div class="ml-20">
                        <p class="mt-10 w-60 text-center">欢迎登录</p>
                        <p class="mt-8 text-gray-600">请输入你的用户名</p>
                        <input type="text" class="w-60 h-8 mt-2 outline-0 border-b-2 border-black"
                            style="text-indent:1ch ;background: none;" v-model="username">
                        <p class="mt-8  text-gray-600">请输入你的密码</p>
                        <input type="password" class="w-60 mt-2 h-8 outline-0 border-b-2 border-black"
                            style="text-indent: 1ch;background: none;" v-model="password">
                        <button value="" class="w-60 leading-10 mt-10 bg-black text-white rounded-3xl"
                            @click="sentlogin()">登录</button>
                    </div>
                    <router-link class="mt-10 float-right mr-20" to="/register">点击注册</router-link>

                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { useUserStore } from "../store/user"
const router = useRouter()
const username = ref()
const password = ref()
const store = useUserStore();
interface login {
    code: number,
    message: string,
    data?: {
        usename: string,
        token: string
    },
}
//登录函数
const sentlogin = async () => {
    if (username.value === '' || password.value === '') {
        return alert("信息不完整");
    } else {
        const register = await useAsyncData<login>('register', () => $fetch('/api/user/login', { method: "post", body: { username: username.value, password: password.value } }))
        if (register.data.value?.code == 200) {
            alert("登录成功")
            store.$patch({
                login: true,
                token: register.data.value?.data?.token,
                username: username.value
            })
            // router.push(`/user/username=${username.value}`)
            router.push('home')
        } else {
            alert("用户名不存在或密码错误")
        }
    }
} 
</script>
<style lang="less">
.background {
    background-image: url(../public/img/login.png);
}
</style>